//Cufon.replace('span');
Cufon.replace('li');
Cufon.replace('h1');
//Cufon.replace('p');

$(function() {
	//all the menu items
	var $items 		= $('#cc_menu .cc_item');
	//number of menu items
	var cnt_items	= $items.length;
	//if menu is expanded then folded is true
	var folded		= false;
	//timeout to trigger the mouseenter event on the menu items
	var menu_time;
	/**
	bind the mouseenter, mouseleave to each item:
	- shows / hides image and submenu
	bind the click event to the list elements (submenu):
	- hides all items except the clicked one, 
	and shows the content for that item
	*/
	$items.unbind('mouseenter')
		  .bind('mouseenter',m_enter)
	      .unbind('mouseleave')
		  .bind('mouseleave',m_leave)
		  .find('.cc_submenu > ul > li')
		  .bind('click',function(){
		var $li_e = $(this);
			  //if the menu is already folded,
			  //just replace the content
		if(folded){
			hideContent();
			showContent($li_e.attr('class'));
		}	
		      else //fold and show the content
			fold($li_e);
	});
	
	/**
	mouseenter function for the items
	the timeout is used to prevent this event 
	to trigger if the user moves the mouse with 
	a considerable speed through the menu items
	*/
	function m_enter(){
		var $this 	= $(this);
		clearTimeout(menu_time);
		menu_time 	= setTimeout(function(){
		//img
		$this.find('img').stop().animate({'top':'0px'},400);
		//cc_submenu ul
		$this.find('.cc_submenu > ul').stop().animate({'height':'35%'},400);
		},200);
	}
	
	//mouseleave function for the items
	function m_leave(){
		var $this = $(this);
		clearTimeout(menu_time);
		//img
		$this.find('img').stop().animate({'top':'-100%'},400);
		//cc_submenu ul
		$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
	}
	
	//back to menu button - unfolds the menu
	$('#cc_back').bind('click',unfold);
	
	/**
	hides all the menu items except the clicked one
	after that, the content is shown
	*/
	function fold($li_e){
		var $item		= $li_e.closest('.cc_item');
		
		var d = 100;
		var step = 0;
		$items.unbind('mouseenter mouseleave');
		$items.not($item).each(function(){
			var $item = $(this);
			$item.stop().animate({
				'marginLeft':'-80%'
			},d += 200,function(){
				++step;
				if(step == cnt_items-1){
					folded = true;
					showContent($li_e.attr('class'));
				}	
			});
		});
	}
	
	/**
	shows all the menu items 
	also hides any item's image / submenu 
	that might be displayed
	*/
	function unfold(){
		$('#cc_content').stop().animate({'left':'-700px'},400,function(){
			var d = 100;
			var step = 0;
		$items.each(function(){
				var $item = $(this);
				
				$item.find('img')
					 .stop()
					 .animate({'top':'-600px'},200)
					 .andSelf()
					 .find('.cc_submenu > ul')
					 .stop()
					 .animate({'height':'0px'},200);
					 
				$item.stop().animate({
				'marginLeft':'0px'
				},d += 200,function(){
					++step;
					if(step == cnt_items-1){
						folded = false;
						$items.unbind('mouseenter')
							  .bind('mouseenter',m_enter)
							  .unbind('mouseleave')
							  .bind('mouseleave',m_leave);
						
						hideContent();
					}		  
				});
			});
		});
	}
	
	//function to show the content
	function showContent(idx){
		$('#cc_content').stop().animate({'left':'20%'},200,function(){
			$(this).find('.'+idx).fadeIn();
		});
	}
	
	//function to hide the content
	function hideContent(){
		$('#cc_content').find('div').hide();
		}
    });

// Script para redes sociales

	$('.item').hover(
                function(){
                    var $this = $(this);
                    expand($this);
                },
                function(){
                    var $this = $(this);
                    collapse($this);
                }
            );
            function expand($elem){
                var angle = 0;
                var t = setInterval(function () {
                    if(angle == 1440){
                        clearInterval(t);
                        return;
                    }
                    angle += 40;
                    $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
                },10);
                $elem.stop().animate({width:'350%', height:'80%'}, 1000)
                .find('.item_content').fadeIn(400,function(){
                    $(this).find('p').stop(true,true).fadeIn(600);
                });
            }
            function collapse($elem){
                var angle = 1440;
                var t = setInterval(function () {
                    if(angle == 0){
                        clearInterval(t);
                        return;
                    }
                    angle -= 40;
                    $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
                },10);
                $elem.stop().animate({width:'52px', height:'52px'}, 1000)
                .find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();
            }